// 开启代码扫描，需用户承诺书
import React from 'react';
import PropTypes from 'prop-types';
import { Dialog, Table } from '@teamix/ui';
import Pagination from 'components/commonPagination';
import './index.scss';
import exceed from 'utils/apimap';
import intl from '../../../../../../../../../../locale';

const { pathResource } = window.FORCE;

export default class BuildRuleModal extends React.Component {
  static propTypes = {
    taskName: PropTypes.string,
    taskKey: PropTypes.string,
    closeFn: PropTypes.func,
  };

  static defaultProps = {
    taskName: '',
    taskKey: '',
    closeFn: () => {},
  };

  constructor(props) {
    super(props);
    this.state = {
      isModalOpen: true,
      tableData: [],
      isLoading: false,
      page: 1,
    };
  }

  componentDidMount() {
    this.getBuildRulesList(1);
  }

  static getDerivedStateFromProps(props) {
    if (props.trigger) {
      return {};
    }
    return {
      isModalOpen: props.isModalOpen,
    };
  }

  getBuildRulesList(page, per_page = 10) {
    const { taskKey } = this.props;
    this.setState({ isLoading: true, page });
    exceed
      .forceFetch({
        api: 'projects.builds.rules',
        params: {
          projectId: pathResource.id,
        },

        data: {
          plugin: taskKey,
          page,
          per_page,
        },
      })
      .then((result) => {
        this.setState({
          tableData: result,
          isLoading: false,
        });
      });
  }

  onPageNoChange = (page) => {
    this.getBuildRulesList(page);
  };

  showModal = () => {
    this.setState({
      isModalOpen: true,
    });
  };

  onClose = () => {
    this.props.closeFn();
  };

  render() {
    const { taskName } = this.props;
    const dataSource = this.state.tableData.list || [];
    return (
      <React.Fragment>
        <Dialog
          title={
            <div className="rules-title">
              {taskName}
              {intl.get({ id: 'code-assets.containers.rulesModal.Rules', defaultMessage: '规则' })}
            </div>
          }
          visible={this.state.isModalOpen}
          style={{ width: '500px' }}
          onOk={this.handleOk}
          onCancel={this.onClose}
          onClose={this.onClose}
          okProps={{ disabled: !this.state.isSelected }}
          loading={this.state.isLoading}
          footerActions={[]}
          footer={false}
        >
          <Table dataSource={dataSource}>
            <Table.Column
              title={intl.get({
                id: 'code-assets.containers.rulesModal.RuleName',
                defaultMessage: '规则名',
              })}
              dataIndex="chName"
              className="rules-text"
            />
          </Table>
          <Pagination
            onChange={this.onPageNoChange}
            current={this.state.page}
            total={this.state.tableData.amount}
            showJump={false}
            pageSize={10}
            hideOnlyOnePage
          />
        </Dialog>
      </React.Fragment>
    );
  }
}
